import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:gourmet/extensions/ex_widget.dart';
import 'package:gourmet/ui/anchor_category.dart';
import 'package:gourmet/utils/colors.dart';
import 'package:gourmet/utils/styles.dart';

class ClassifyAllController extends GetxController {
  RxInt selectedSectionsIndex = 0.obs;
  final AnchorCategoryController controller = AnchorCategoryController();

  final List<String> sections = [
    '商店超市',
    '美食',
    '快餐便当',
    '地方菜系',
    '甜品饮品',
    '时令水果',
    '小吃馆',
    '生鲜买菜',
    '鲜花绿植',
    '早餐',
    '午餐',
    '下午茶',
    '晚餐',
    '宵夜'
  ];
  final List<List<Widget>> childrenList = [
    [
      StaggeredGrid.count(
        crossAxisCount: 3,
        crossAxisSpacing: 0,
        mainAxisSpacing: 10,
        children: [
          Column(
            children: [
              Center(
                child: Image.network(
                  'https://cdn7.axureshop.com/demo2024/1877666/images/%E5%85%A8%E9%83%A8%E5%88%86%E7%B1%BB/p26.png',
                  width: 45,
                  height: 45,
                  fit: BoxFit.fill,
                ),
              ),
              Container(
                margin: const EdgeInsets.only(top: 10),
                alignment: Alignment.center,
                child: Text(
                  '全部',
                  style: StylesUtils.customTextStyle(
                      color: ColorsUtils.color3333,
                      fontSize: StylesUtils.fontSize13),
                ),
              )
            ],
          ),
          Column(
            children: [
              Center(
                child: Image.network(
                  'https://cdn7.axureshop.com/demo2024/1877666/images/%E5%85%A8%E9%83%A8%E5%88%86%E7%B1%BB/p27.png',
                  width: 45,
                  height: 45,
                  fit: BoxFit.fill,
                ),
              ),
              Container(
                margin: const EdgeInsets.only(top: 10),
                alignment: Alignment.center,
                child: Text(
                  '大超市',
                  style: StylesUtils.customTextStyle(
                      color: ColorsUtils.color3333,
                      fontSize: StylesUtils.fontSize13),
                ),
              )
            ],
          ),
          Column(
            children: [
              Center(
                child: Image.network(
                  'https://cdn7.axureshop.com/demo2024/1877666/images/%E5%85%A8%E9%83%A8%E5%88%86%E7%B1%BB/p28.png',
                  width: 45,
                  height: 45,
                  fit: BoxFit.fill,
                ),
              ),
              Container(
                margin: const EdgeInsets.only(top: 10),
                alignment: Alignment.center,
                child: Text(
                  '便利店',
                  style: StylesUtils.customTextStyle(
                      color: ColorsUtils.color3333,
                      fontSize: StylesUtils.fontSize13),
                ),
              )
            ],
          ),
          Column(
            children: [
              Center(
                child: Image.network(
                  'https://cdn7.axureshop.com/demo2024/1877666/images/%E5%85%A8%E9%83%A8%E5%88%86%E7%B1%BB/p29.png',
                  width: 45,
                  height: 45,
                  fit: BoxFit.fill,
                ),
              ),
              Container(
                margin: const EdgeInsets.only(top: 10),
                alignment: Alignment.center,
                child: Text(
                  '休闲零食',
                  style: StylesUtils.customTextStyle(
                      color: ColorsUtils.color3333,
                      fontSize: StylesUtils.fontSize13),
                ),
              )
            ],
          ),
          Column(
            children: [
              Center(
                child: Image.network(
                  'https://cdn7.axureshop.com/demo2024/1877666/images/%E5%85%A8%E9%83%A8%E5%88%86%E7%B1%BB/p30.png',
                  width: 45,
                  height: 45,
                  fit: BoxFit.fill,
                ),
              ),
              Container(
                margin: const EdgeInsets.only(top: 10),
                alignment: Alignment.center,
                child: Text(
                  '饮料冰品',
                  style: StylesUtils.customTextStyle(
                      color: ColorsUtils.color3333,
                      fontSize: StylesUtils.fontSize13),
                ),
              )
            ],
          ),
          Column(
            children: [
              Center(
                child: Image.network(
                  'https://cdn7.axureshop.com/demo2024/1877666/images/%E5%85%A8%E9%83%A8%E5%88%86%E7%B1%BB/p31.png',
                  width: 45,
                  height: 45,
                  fit: BoxFit.fill,
                ),
              ),
              Container(
                margin: const EdgeInsets.only(top: 10),
                alignment: Alignment.center,
                child: Text(
                  '水站',
                  style: StylesUtils.customTextStyle(
                      color: ColorsUtils.color3333,
                      fontSize: StylesUtils.fontSize13),
                ),
              )
            ],
          ),
        ],
      ),
    ],
    [
      StaggeredGrid.count(
        crossAxisCount: 3,
        crossAxisSpacing: 0,
        mainAxisSpacing: 10,
        children: [
          Column(
            children: [
              Center(
                child: Image.network(
                  'https://cdn7.axureshop.com/demo2024/1877666/images/%E5%85%A8%E9%83%A8%E5%88%86%E7%B1%BB/p32.png',
                  width: 45,
                  height: 45,
                  fit: BoxFit.fill,
                ),
              ),
              Container(
                margin: const EdgeInsets.only(top: 10),
                alignment: Alignment.center,
                child: Text(
                  '全部',
                  style: StylesUtils.customTextStyle(
                      color: ColorsUtils.color3333,
                      fontSize: StylesUtils.fontSize13),
                ),
              )
            ],
          ),
          Column(
            children: [
              Center(
                child: Image.network(
                  'https://cdn7.axureshop.com/demo2024/1877666/images/%E5%85%A8%E9%83%A8%E5%88%86%E7%B1%BB/p33.png',
                  width: 45,
                  height: 45,
                  fit: BoxFit.fill,
                ),
              ),
              Container(
                margin: const EdgeInsets.only(top: 10),
                alignment: Alignment.center,
                child: Text(
                  '简餐便当',
                  style: StylesUtils.customTextStyle(
                      color: ColorsUtils.color3333,
                      fontSize: StylesUtils.fontSize13),
                ),
              )
            ],
          ),
          Column(
            children: [
              Center(
                child: Image.network(
                  'https://cdn7.axureshop.com/demo2024/1877666/images/%E5%85%A8%E9%83%A8%E5%88%86%E7%B1%BB/p34.png',
                  width: 45,
                  height: 45,
                  fit: BoxFit.fill,
                ),
              ),
              Container(
                margin: const EdgeInsets.only(top: 10),
                alignment: Alignment.center,
                child: Text(
                  '小吃炸串',
                  style: StylesUtils.customTextStyle(
                      color: ColorsUtils.color3333,
                      fontSize: StylesUtils.fontSize13),
                ),
              )
            ],
          ),
          Column(
            children: [
              Center(
                child: Image.network(
                  'https://cdn7.axureshop.com/demo2024/1877666/images/%E5%85%A8%E9%83%A8%E5%88%86%E7%B1%BB/p35.png',
                  width: 45,
                  height: 45,
                  fit: BoxFit.fill,
                ),
              ),
              Container(
                margin: const EdgeInsets.only(top: 10),
                alignment: Alignment.center,
                child: Text(
                  '地方菜系',
                  style: StylesUtils.customTextStyle(
                      color: ColorsUtils.color3333,
                      fontSize: StylesUtils.fontSize13),
                ),
              )
            ],
          ),
          Column(
            children: [
              Center(
                child: Image.network(
                  'https://cdn7.axureshop.com/demo2024/1877666/images/%E5%85%A8%E9%83%A8%E5%88%86%E7%B1%BB/p36.png',
                  width: 45,
                  height: 45,
                  fit: BoxFit.fill,
                ),
              ),
              Container(
                margin: const EdgeInsets.only(top: 10),
                alignment: Alignment.center,
                child: Text(
                  '面食粥点',
                  style: StylesUtils.customTextStyle(
                      color: ColorsUtils.color3333,
                      fontSize: StylesUtils.fontSize13),
                ),
              )
            ],
          ),
          Column(
            children: [
              Center(
                child: Image.network(
                  'https://cdn7.axureshop.com/demo2024/1877666/images/%E5%85%A8%E9%83%A8%E5%88%86%E7%B1%BB/p37.png',
                  width: 45,
                  height: 45,
                  fit: BoxFit.fill,
                ),
              ),
              Container(
                margin: const EdgeInsets.only(top: 10),
                alignment: Alignment.center,
                child: Text(
                  '轻食西餐',
                  style: StylesUtils.customTextStyle(
                      color: ColorsUtils.color3333,
                      fontSize: StylesUtils.fontSize13),
                ),
              )
            ],
          ),
          Column(
            children: [
              Center(
                child: Image.network(
                  'https://cdn7.axureshop.com/demo2024/1877666/images/%E5%85%A8%E9%83%A8%E5%88%86%E7%B1%BB/p38.png',
                  width: 45,
                  height: 45,
                  fit: BoxFit.fill,
                ),
              ),
              Container(
                margin: const EdgeInsets.only(top: 10),
                alignment: Alignment.center,
                child: Text(
                  '日韩料理',
                  style: StylesUtils.customTextStyle(
                      color: ColorsUtils.color3333,
                      fontSize: StylesUtils.fontSize13),
                ),
              )
            ],
          ),
          Column(
            children: [
              Center(
                child: Image.network(
                  'https://cdn7.axureshop.com/demo2024/1877666/images/%E5%85%A8%E9%83%A8%E5%88%86%E7%B1%BB/p39.png',
                  width: 45,
                  height: 45,
                  fit: BoxFit.fill,
                ),
              ),
              Container(
                margin: const EdgeInsets.only(top: 10),
                alignment: Alignment.center,
                child: Text(
                  '汉堡披萨',
                  style: StylesUtils.customTextStyle(
                      color: ColorsUtils.color3333,
                      fontSize: StylesUtils.fontSize13),
                ),
              )
            ],
          ),
        ],
      ),
    ],
    [
      StaggeredGrid.count(
        crossAxisCount: 3,
        crossAxisSpacing: 0,
        mainAxisSpacing: 10,
        children: [
          Column(
            children: [
              Center(
                child: Image.network(
                  'https://cdn7.axureshop.com/demo2024/1877666/images/%E5%85%A8%E9%83%A8%E5%88%86%E7%B1%BB/p20.png',
                  width: 45,
                  height: 45,
                  fit: BoxFit.fill,
                ),
              ),
              Container(
                margin: const EdgeInsets.only(top: 10),
                alignment: Alignment.center,
                child: Text(
                  '全部',
                  style: StylesUtils.customTextStyle(
                      color: ColorsUtils.color3333,
                      fontSize: StylesUtils.fontSize13),
                ),
              )
            ],
          ),
          Column(
            children: [
              Center(
                child: Image.network(
                  'https://cdn7.axureshop.com/demo2024/1877666/images/%E5%85%A8%E9%83%A8%E5%88%86%E7%B1%BB/p21.png',
                  width: 45,
                  height: 45,
                  fit: BoxFit.fill,
                ),
              ),
              Container(
                margin: const EdgeInsets.only(top: 10),
                alignment: Alignment.center,
                child: Text(
                  '简餐',
                  style: StylesUtils.customTextStyle(
                      color: ColorsUtils.color3333,
                      fontSize: StylesUtils.fontSize13),
                ),
              )
            ],
          ),
          Column(
            children: [
              Center(
                child: Image.network(
                  'https://cdn7.axureshop.com/demo2024/1877666/images/%E5%85%A8%E9%83%A8%E5%88%86%E7%B1%BB/p22.png',
                  width: 45,
                  height: 45,
                  fit: BoxFit.fill,
                ),
              ),
              Container(
                margin: const EdgeInsets.only(top: 10),
                alignment: Alignment.center,
                child: Text(
                  '盖浇饭',
                  style: StylesUtils.customTextStyle(
                      color: ColorsUtils.color3333,
                      fontSize: StylesUtils.fontSize13),
                ),
              )
            ],
          ),
          Column(
            children: [
              Center(
                child: Image.network(
                  'https://cdn7.axureshop.com/demo2024/1877666/images/%E5%85%A8%E9%83%A8%E5%88%86%E7%B1%BB/p23.png',
                  width: 45,
                  height: 45,
                  fit: BoxFit.fill,
                ),
              ),
              Container(
                margin: const EdgeInsets.only(top: 10),
                alignment: Alignment.center,
                child: Text(
                  '米粉面馆',
                  style: StylesUtils.customTextStyle(
                      color: ColorsUtils.color3333,
                      fontSize: StylesUtils.fontSize13),
                ),
              )
            ],
          ),
          Column(
            children: [
              Center(
                child: Image.network(
                  'https://cdn7.axureshop.com/demo2024/1877666/images/%E5%85%A8%E9%83%A8%E5%88%86%E7%B1%BB/p24.png',
                  width: 45,
                  height: 45,
                  fit: BoxFit.fill,
                ),
              ),
              Container(
                margin: const EdgeInsets.only(top: 10),
                alignment: Alignment.center,
                child: Text(
                  '包子粥店',
                  style: StylesUtils.customTextStyle(
                      color: ColorsUtils.color3333,
                      fontSize: StylesUtils.fontSize13),
                ),
              )
            ],
          ),
          Column(
            children: [
              Center(
                child: Image.network(
                  'https://cdn7.axureshop.com/demo2024/1877666/images/%E5%85%A8%E9%83%A8%E5%88%86%E7%B1%BB/p25.png',
                  width: 45,
                  height: 45,
                  fit: BoxFit.fill,
                ),
              ),
              Container(
                margin: const EdgeInsets.only(top: 10),
                alignment: Alignment.center,
                child: Text(
                  '麻辣烫',
                  style: StylesUtils.customTextStyle(
                      color: ColorsUtils.color3333,
                      fontSize: StylesUtils.fontSize13),
                ),
              )
            ],
          ),
        ],
      ),
    ]
  ];

  @override
  void onInit() {
    appendStick();
    controller.addListener(onCategoryChanged);
    super.onInit();
  }

  @override
  void onClose() {
    controller.removeListener(onCategoryChanged);
    controller.dispose();
    super.onClose();
  }

  void appendStick() {
    for (var i = 3; i < sections.length; i++) {
      childrenList.add([
        StaggeredGrid.count(
          crossAxisCount: 3,
          crossAxisSpacing: 0,
          mainAxisSpacing: 10,
          children: [
            Column(
              children: [
                Center(
                  child: Image.network(
                    'https://cdn7.axureshop.com/demo2024/1877666/images/%E5%85%A8%E9%83%A8%E5%88%86%E7%B1%BB/p20.png',
                    width: 45,
                    height: 45,
                    fit: BoxFit.fill,
                  ),
                ),
                Container(
                  margin: const EdgeInsets.only(top: 10),
                  alignment: Alignment.center,
                  child: Text(
                    '全部',
                    style: StylesUtils.customTextStyle(
                        color: ColorsUtils.color3333,
                        fontSize: StylesUtils.fontSize13),
                  ),
                )
              ],
            ),
            Column(
              children: [
                Center(
                  child: Image.network(
                    'https://cdn7.axureshop.com/demo2024/1877666/images/%E5%85%A8%E9%83%A8%E5%88%86%E7%B1%BB/p21.png',
                    width: 45,
                    height: 45,
                    fit: BoxFit.fill,
                  ),
                ),
                Container(
                  margin: const EdgeInsets.only(top: 10),
                  alignment: Alignment.center,
                  child: Text(
                    '简餐',
                    style: StylesUtils.customTextStyle(
                        color: ColorsUtils.color3333,
                        fontSize: StylesUtils.fontSize13),
                  ),
                )
              ],
            ),
            Column(
              children: [
                Center(
                  child: Image.network(
                    'https://cdn7.axureshop.com/demo2024/1877666/images/%E5%85%A8%E9%83%A8%E5%88%86%E7%B1%BB/p22.png',
                    width: 45,
                    height: 45,
                    fit: BoxFit.fill,
                  ),
                ),
                Container(
                  margin: const EdgeInsets.only(top: 10),
                  alignment: Alignment.center,
                  child: Text(
                    '盖浇饭',
                    style: StylesUtils.customTextStyle(
                        color: ColorsUtils.color3333,
                        fontSize: StylesUtils.fontSize13),
                  ),
                )
              ],
            ),
            Column(
              children: [
                Center(
                  child: Image.network(
                    'https://cdn7.axureshop.com/demo2024/1877666/images/%E5%85%A8%E9%83%A8%E5%88%86%E7%B1%BB/p23.png',
                    width: 45,
                    height: 45,
                    fit: BoxFit.fill,
                  ),
                ),
                Container(
                  margin: const EdgeInsets.only(top: 10),
                  alignment: Alignment.center,
                  child: Text(
                    '米粉面馆',
                    style: StylesUtils.customTextStyle(
                        color: ColorsUtils.color3333,
                        fontSize: StylesUtils.fontSize13),
                  ),
                )
              ],
            ),
            Column(
              children: [
                Center(
                  child: Image.network(
                    'https://cdn7.axureshop.com/demo2024/1877666/images/%E5%85%A8%E9%83%A8%E5%88%86%E7%B1%BB/p24.png',
                    width: 45,
                    height: 45,
                    fit: BoxFit.fill,
                  ),
                ),
                Container(
                  margin: const EdgeInsets.only(top: 10),
                  alignment: Alignment.center,
                  child: Text(
                    '包子粥店',
                    style: StylesUtils.customTextStyle(
                        color: ColorsUtils.color3333,
                        fontSize: StylesUtils.fontSize13),
                  ),
                )
              ],
            ),
            Column(
              children: [
                Center(
                  child: Image.network(
                    'https://cdn7.axureshop.com/demo2024/1877666/images/%E5%85%A8%E9%83%A8%E5%88%86%E7%B1%BB/p25.png',
                    width: 45,
                    height: 45,
                    fit: BoxFit.fill,
                  ),
                ),
                Container(
                  margin: const EdgeInsets.only(top: 10),
                  alignment: Alignment.center,
                  child: Text(
                    '麻辣烫',
                    style: StylesUtils.customTextStyle(
                        color: ColorsUtils.color3333,
                        fontSize: StylesUtils.fontSize13),
                  ),
                )
              ],
            ),
          ],
        )
      ]);
    }
  }

  void onCategoryChanged() {
    selectedSectionsIndex.value = controller.selectedIndex;
  }
}

class ClassifyAllPage extends GetView<ClassifyAllController> {
  const ClassifyAllPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        leading: IconButton(
          onPressed: Get.back,
          icon: const Icon(
            Icons.arrow_back_ios,
            size: 20,
            color: Colors.black,
          ),
        ),
        title: Center(
          child: Text(
            '全部分类',
            style: StylesUtils.customTextStyle(
                fontSize: StylesUtils.fontSize18,
                color: ColorsUtils.color0000,
                fontWeight: FontWeight.w700),
          ),
        ),
        systemOverlayStyle: SystemUiOverlayStyle.dark,
      ),
      body: AnchorCategory(
        categoryWidth: 120,
        controller: controller.controller,
        itemCount: controller.sections.length,
        sticky: true,
        categoryItemBuilder: (BuildContext context, int index) {
          return Obx(
            () => Container(
              height: 50,
              alignment: Alignment.center,
              color: controller.selectedSectionsIndex.value == index
                  ? Colors.white
                  : ColorsUtils.rgba(249, 249, 249, 1),
              child: Text(
                controller.sections[index],
                style: StylesUtils.customTextStyle(
                  color: controller.selectedSectionsIndex.value == index
                      ? ColorsUtils.colorFf64
                      : ColorsUtils.color7979,
                  fontWeight: controller.selectedSectionsIndex.value == index
                      ? FontWeight.w700
                      : FontWeight.normal,
                ),
              ),
            ).onTap(() {
              controller.controller.selectTo(index);
            }),
          );
        },
        sectionItemBuilder: (BuildContext context, int index) {
          return Container(
            height: 50,
            color: Colors.white,
            child: CustomPaint(
              painter: _MyCustomPainter(),
              size: const Size.fromHeight(50),
              child: Container(
                height: 50,
                alignment: Alignment.center,
                child: Text(
                  controller.sections[index],
                  style: StylesUtils.customTextStyle(
                      fontSize: StylesUtils.fontSize16,
                      color: ColorsUtils.color0000),
                ),
              ),
            ),
          );
        },
        sectionOfChildrenBuilder: (BuildContext context, int index) {
          return controller.childrenList[index];
        },
      ),
    );
  }
}

class _MyCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..strokeWidth = 1
      ..style = PaintingStyle.stroke
      ..color = ColorsUtils.parseColorFromHexString(ColorsUtils.colorE4e4);

    Path path = Path();
    path.moveTo(10, size.height / 2);
    path.lineTo(80, size.height / 2);
    canvas.drawPath(path, paint);
    path.reset();
    path.moveTo(size.width - 10, size.height / 2);
    path.lineTo(size.width - 80, size.height / 2);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return this != oldDelegate;
  }
}
